<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Task Manager</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header class="site-header">
            <div class="container">
                <div class="header-main">
                    <div>
                        <h1>Task Manager</h1>
                        <p class="tagline">Add, complete, and remove tasks — responsive and accessible.</p>
                    </div>
                    <div class="header-actions">
                        <button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Toggle dark mode" title="Toggle dark mode">🌙</button>
                    </div>
                </div>
            </div>
        </header>

        <main class="container" id="main">
            <section aria-labelledby="todo-heading" class="todo-section">
                <h2 id="todo-heading">Your Tasks</h2>

                <form id="task-form" class="task-form" aria-describedby="form-desc">
                    <p id="form-desc" class="sr-only">Add a task by typing a title and pressing Add Task.</p>
                    <label for="task-input" class="sr-only">Task title</label>
                    <input id="task-input" name="task" type="text" placeholder="What do you want to do?" required maxlength="200" aria-label="New task">
                    <button type="submit" id="add-btn">Add Task</button>
                </form>

                        <div class="controls">
                            <div class="filters" role="tablist" aria-label="Filter tasks">
                                <button class="filter-btn" data-filter="all" aria-pressed="true">All</button>
                                <button class="filter-btn" data-filter="active" aria-pressed="false">Active</button>
                                <button class="filter-btn" data-filter="completed" aria-pressed="false">Completed</button>
                            </div>

                            <div class="actions">
                                <button id="clear-completed" class="link-button">Clear completed</button>
                                <button id="clear-all" class="link-button">Clear all</button>
                            </div>
                        </div>

                <div class="list-wrapper">
                    <ul id="task-list" class="task-list" aria-live="polite" aria-label="Task list"></ul>
                </div>

                <div id="empty" class="empty-state" aria-hidden="false">No tasks yet. Add your first task above.</div>
            </section>
        </main>

        <footer class="site-footer">
            <div class="container">
                <p>Built with semantic HTML, modern CSS, and accessible JavaScript.</p>
            </div>
        </footer>

        <script src="app.js" defer></script>
    </body>
</html>